<template>
  <div class="PayslipWaitProvide">
    <search :name="params.empName" :dep="params.depId" :isShow="true" @change="searchChange" @payslipOk="payslip" />
    <a-table :row-key="(n, m) => m" class="mg_t24" :pagination="pagination" :data-source="dataSource" @change="changePage">
      <a-table-column title="姓名" data-index="empName" />

      <a-table-column title="手机">
        <template slot-scope="{ phoneStatus }">
          <xq-icon type="icon-wancheng2" v-if="phoneStatus" class="primarys" />
          <xq-icon type="icon-wancheng2" v-if="!phoneStatus" style="font-size:24px;color:#BFBFBF" />
          <!-- <img v-if="!phoneStatus" src="@/assets/img/payslip/weixuanzhong.png" />
          <img v-if="phoneStatus" src="@/assets/img/payslip/xuanzhong.png" /> -->
        </template>
      </a-table-column>
      <a-table-column title="微信">
        <template slot-scope="{ wechatStatus }">
          <!-- <img v-if="!wechatStatus" src="@/assets/img/payslip/weixuanzhong.png" />
          <img v-if="wechatStatus" src="@/assets/img/payslip/weixin.png" /> -->
          <xq-icon type="icon-wancheng2" v-if="wechatStatus" class="primarys" />
          <xq-icon type="icon-wancheng2" v-if="!wechatStatus" style="font-size:24px;color:#BFBFBF" />
        </template>
      </a-table-column>
      <a-table-column title="操作">
        <template slot-scope="text">
          <span class="primary" @click="Detail(text)">查看</span>
        </template>
      </a-table-column>
    </a-table>
    <modalDetail :visible="visibleModal" :options="options" @change="handleChange" />
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "PayslipWaitProvide",
  components: {
    search: () => import("./search"),
    modalDetail: () => import("./modal-detail")
  },

  data() {
    return {
      params: {
        empName: "",
        depId: ""
      },
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: total => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        personalPeriod: null,
        pageSizeOptions: ["10", "20", "50", "100"]
      },
      dataSource: [],
      options: {},
      visibleModal: false
    };
  },
  computed: {
    ...mapState(["hr"])
  },

  created() {
    this.getList();
  },

  methods: {
    payslip(e) {
      this.$request({
        url: "/hr/api/v1/salaryBills/listAllRelation",
        params: {
          companyId: this.hr.companyId,
          tableId: this.$route.query.tableId,
          sendStatus: 0,
          reloadCount: true
        }
      }).then(({ data }) => {
        this.$router.push({
          path: "../wages/add-payslip-sort/add-payslip-second",
          query: {
            unSendCount: this.pagination.total,
            ...this.$route.query
          }
        });
      });
    },
    // 获取列表
    getList() {
      for (const key in this.params) {
        if (!this.params[key]) delete this.params[key];
      }
      this.$request({
        url: "/hr/api/v1/salaryBillSends/salaryBillListPageBySend",
        params: {
          companyId: this.hr.companyId,
          tableId: this.$route.query.tableId,
          sendStatus: 0,
          ...this.params,
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize
        }
      }).then(({ data }) => {
        this.pagination.total = data.entityCount || 0;
        this.dataSource = data.entities;
      });
    },
    Detail(e) {
      this.visibleModal = true;
      this.options = e;
    },
    // 弹窗
    handleChange(e) {
      this.visibleModal = e.visible;
    },
    // search
    searchChange(e) {
      this.params.empName = e.name;
      this.params.depId = e.dep;
      // this.params.pageNo = 1;
      // this.pagination.current = 1;
      this.getList();
    },
    // 翻页
    changePage(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped>
.primarys {
  color: var(--primary);
  font-size: 24px;
}
</style>
